<template>
  <div>
    <MHeader :back="true">列表页</MHeader>
    <div class="content" ref="scroll" @scroll="loadMore">
      <ul>
        <router-link :to="{name:'detail',params:{bid:book.bookId}}" v-for="(book,key) in data" :key="key" tag="li">
          <img v-lazy="book.bookCover"/>
          <div class="right">
            <h4>{{book.bookName}}</h4>
            <p>{{book.bookInfo}}</p>
            <b>{{book.bookPrice}}</b>
            <div class="button_list">
              <button @click.stop="remove(book.bookId)">删除</button>
              <button @click.stop="add(book.bookId)">添加</button>
            </div>

          </div>
        </router-link>
      </ul>
      <div @click="more" class="more">加载更多</div>
    </div>
  </div>
</template>

<script>
  import MHeader from '../base/MHeader'
  import {pagination, removeBook} from '../api'

  export default {
    data() {
      //offset 偏移量，hasmore 是否有更多
      //默认不是正在加载
      return {data: [], offset: 0, hasMore: true, isLoading: false}
    },
    created() {
      this.getData();
    },
    mounted() {
      let scroll = this.$refs.scroll;
      let top = scroll.offsetTop;
      let isMove = false;
      scroll.addEventListener('touchstart', (e) => {

        if (scroll.scrollTop != 0 || scroll.offsetTop != top) return; //滚动条在最顶端时，而且当前div在顶端的时候

        let start = e.touches[0].pageY; //手指点击的开始
        console.log(start);
        let distance = 0;
        let move = (e) => {
          isMove = true;
          let current = e.touches[0].pageY;
          distance = current - start; //求拉动的距离
          if (distance > 0) {
            if (distance <= 50) {  //如果大于50，就默认是50像素
              scroll.style.top = distance + top + 'px';
            } else {
              scroll.style.top = 50 + top + 'px';
              distance = 50;
            }
          } else {
            scroll.removeEventListener('touchmove', move);
            scroll.removeEventListener('touchend', end);
          }
        };

        let end = (e) => {
          if(!isMove) return;
          isMove = false;
          clearInterval(this.timer2);
          this.timer2 = setInterval(() => { //一共 distance 每次 -1
            if (distance < 0) {
              clearInterval(this.timer2);
              distance = 0;

              scroll.style.top = top + 'px';

              scroll.removeEventListener('touchmove', move);
              scroll.removeEventListener('touchend', end);

              this.offset = 0;

              this.data = [];
              this.getData();

              return;
            }
            distance -= 1;
            scroll.style.top = top + distance + 'px';

          }, 1)
        };

        scroll.addEventListener('touchmove', move);
        scroll.addEventListener('touchend', end);
      }, false);
    },
    methods: {
      async getData() {
        // 给data起别名 对象中属性名字必须和得到的结果名字一致

        if (this.hasMore && !this.isLoading) {
          this.isLoading = true;
          let {hasMore, books} = await pagination(this.offset);
          this.data = [...this.data, ...books];
          this.hasMore = hasMore;
          this.offset = this.data.length;  //维护偏移量
          this.isLoading = false; //加载完毕后在放开
        }

      },
      async remove(id) {
        // 给data起别名 对象中属性名字必须和得到的结果名字一致
        await removeBook(id);

        //删除前台数据
        this.data = this.data.filter(item => item.bookId !== id);
      },
      more() {
        this.getData();
      },
      loadMore() {

        clearInterval(this.timer);
        //进来时触发scroll事件，可能触发n次， 先开一个定时器，下次触发时将上传的定时器清除掉
        this.timer = setTimeout(() => { //防抖功能
          // scrollTop 卷去的高度
          // clientHeight 当前高度
          // scrollHeight 总高
          let {scrollTop, clientHeight, scrollHeight} = this.$refs.scroll;

          if (scrollTop + clientHeight + 20 > scrollHeight) {
            this.getData();//获取更多
          }

        }, 60);

      }
    },
    computed: {},
    components: {MHeader}
  }
</script>

<style scoped>
  .content ul {
    padding: 10px;
  }

  .content ul li {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
  }

  .content ul li img {
    width: 130px;
    height: 150px;
  }

  .content h4 {
    font-size: 20px;
    line-height: 25px;
  }

  .content p {
    color: #cccccc;
    line-height: 35px;
  }

  .content b {
    color: red;
  }

  .content button {
    display: block;
    width: 60px;
    height: 25px;
    background: orange;
    color: #fff;
    border: none;
    border-radius: 15px;
    outline: none;
  }

  .more {
    margin: 10px;
    background: #67d6ff;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
  }

  .button_list{
    display: flex;
    justify-content: space-around;
  }
</style>
